<template>
  <div class="app-container home">
    <!-- <el-row>
      <el-col :span="16">
        
      </el-col>
    </el-row> -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
        <el-button
          style="float: right; padding: 3px 0; font-size: 12px"
          type="text"
          @click="btnClick"
          >编辑</el-button
        >
      </div>
      <div>
        <div class="text-center">
          <userAvatar :user="user" />
        </div>
        <ul class="list-group list-group-striped">
          <li class="list-group-item">
            <svg-icon icon-class="user" />用户名称
            <div class="pull-right">{{ user.userName }}</div>
          </li>
          <li class="list-group-item">
            <svg-icon icon-class="phone" />手机号码
            <div class="pull-right">{{ user.phonenumber }}</div>
          </li>
          <li class="list-group-item">
            <svg-icon icon-class="email" />用户邮箱
            <div class="pull-right">{{ user.email }}</div>
          </li>
          <li class="list-group-item">
            <svg-icon icon-class="tree" />所属部门
            <div class="pull-right" v-if="user.dept">
              {{ user.dept.deptName }} / {{ postGroup }}
            </div>
          </li>
          <li class="list-group-item">
            <svg-icon icon-class="peoples" />所属角色
            <div class="pull-right">{{ roleGroup }}</div>
          </li>
          <li class="list-group-item">
            <svg-icon icon-class="date" />创建日期
            <div class="pull-right">{{ user.createTime }}</div>
          </li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUserProfile } from "@/api/system/user";
import userAvatar from "../views/system/user/profile/userAvatar.vue";
import userInfo from "../views/system/user/profile/userInfo";
import resetPwd from "../views/system/user/profile/resetPwd";

export default {
  name: "Index",
  components: { userAvatar, userInfo, resetPwd },
  data() {
    return {
      // 版本号
      // version: "3.8.1",
      suername: "",
      time: [],
      timeFlag: false,
      schoolInfo: {},
      user: {},
      roleGroup: {},
      postGroup: {},
    };
  },
  methods: {
    getCurrentUserInfo() {
      getUserProfile().then((response) => {
        // console.log(response);
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },
    btnClick() {
      this.$router.push("/user/profile");
    },
  },
  created() {
    this.getCurrentUserInfo();
    this.suername = this.$store.state.user.name;
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.txt {
  line-height: 36px;
}
.shenhe {
  font-size: 24px;
  margin-top: 10px;
}
.log {
  margin-left: 20px;
}
.box-card {
  width: 30%;
  display: inline-block;
}
.box-card1 {
  width: 60%;
  margin-left: 20px;
  display: inline-block;
  float: right;
  /* position: absolute;
  top: 0; */
}
</style>
